<template>
    <page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
    <!-- 帖子详细页 -->
    <view class="container">
        <view class="post-container">
            <!-- 标题 -->
            <view class="title">{{ item?.title }}</view>
            <!-- 用户信息：头像、用户名、发布日期 -->
            <view class="user-msg">
                <view class="left">
                    <image class="avatar" :src="item?.avatarUrl" mode="aspectFill" />
                    <view class="header-message">
                        <text class="userName">{{ item?.nickname }}</text>
                        <text class="date">发布于{{ item?.createTime.slice(0, 10) }}</text>
                    </view>
                </view>
                <view class="right" v-if="userStore.userInfo!.id != item?.userId">
                    <button class="unfollowed" v-if="!item?.followed" @tap="follow">+关注</button>
                    <button class="followed" v-if="item?.followed" @tap="follow">已关注</button>
                </view>
            </view>
            <!-- 正文内容 -->
            <view class="content">
                <text class="text" user-select>
                    {{ item?.content }}
                </text>
                <view class="img-container">
                    <image v-for="(img, index) in item?.images" :key="index" class="img" :src="img.imageUrl"
                        mode="aspectFill" @tap="previewImage(index)" />
                </view>
            </view>
        </view>
        <!-- 评论区 -->
        <view class="comment-container">
            <view class="title">
                全部评论
            </view>
            <!-- 评论卡片 -->
            <Empty v-if="commentList.length == 0"></Empty>
            <view class="comment-list">
                <CustomComment v-for="(item, index) in commentList" :item=item :key="index"
                    @inputComment="inputComment">
                </CustomComment>
            </view>
            <!-- 输入框组件 -->
            <CommentInput ref="commentInput" :item1="item" :iconShow="true" @favoritePopup="change"
                @sendSuccess="getCommentList">
            </CommentInput>
        </view>
    </view>
</template>
<script setup lang="ts">
import Empty from '@/components/Empty.vue';
import CommentInput from '@/components/CommentInput.vue';
import CustomComment from '@/components/CustomComment.vue';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { API_removeFollowing, API_addFollowing } from '@/service/follow';
import { API_getDetailArticle, API_getComment } from '@/service/article';
import type { DetailArticle, ArticleImage, ArticleItem, Comment } from '@/type/article';
import { useUserStore } from '@/store';
//输入框组件
const commentInput = ref<any>();
//防滚动穿透变量
let show = ref<boolean>(false);
const userStore = useUserStore();
// 帖子详细
const item = ref<DetailArticle>();
// 评论列表
const commentList = ref<Comment[]>([]);
let articleId: number = -1;
//预览图片
const previewImage = (index: number) => {
    let imageArr: string[] = [];
    for (let i = 0; i < item.value!.images!.length; i++) {
        imageArr[i] = item.value!.images![i].imageUrl;
    }
    uni.previewImage({
        indicator: "none", //图片指示器样式
        current: index,  //图片索引值
        urls: imageArr //需要预览的图片链接列表
    });
}
// 防止滚动穿透
const change = (e: boolean) => {
    show.value = e;
}
//关注
const follow = async () => {
    if (item.value!.followed) {
        uni.showModal({
            content: '确认取消关注？',
            success: async function (res) {
                if (res.confirm) {
                    let res = await API_removeFollowing(item.value!.userId, userStore.userInfo!.id!);
                    if (res.code) {
                        item.value!.followed = false;
                    } else uni.showToast({ icon: 'none', title: '操作失败' })
                }
            }
        });
    } else {
        let res = await API_addFollowing(item.value!.userId, userStore.userInfo!.id!);
        if (res.code) {
            item.value!.followed = true;
        } else uni.showToast({ icon: 'none', title: '操作失败' })
    }

}
const inputComment = (item: Comment) => {
    commentInput.value.replyFocus(item);
}
const getDetail = async () => {
    let res = await API_getDetailArticle(articleId);
    item.value = res.data;
    item.value.content = item.value.content.split('<br>').join('\n');
}
const getCommentList = async () => {
    const res1 = await API_getComment(0, articleId);
    commentList.value = res1.data;
}
onLoad(async (option) => {
    if (option) {
        articleId = parseInt(option.id);
    }
    await getDetail();
    await getCommentList();
})

</script>
<style>
page {
    background-color: #fff;
}
</style>
<style scoped lang="scss">
.container {
    box-sizing: border-box;
    padding: 20rpx;
    color: $color-title;

    .post-container {
        .title {
            font-size: 40rpx;
            font-weight: 700;
            margin-bottom: 10rpx;
        }

        .user-msg {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15rpx;

            .left {
                display: flex;
                font-size: 28rpx;
                align-items: center;

                .avatar {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                    margin-right: 20rpx;
                }

                .header-message {
                    display: flex;
                    flex-direction: column;
                    font-size: 28rpx;

                    .date {
                        font-size: 24rpx;
                        color: #aaa;
                    }
                }

                .right {
                    .button {
                        height: 30rpx;
                        font-size: 28rpx;
                        background-color: $color-main;
                        color: #fff;
                    }
                }


            }

            .right {
                .followed {
                    padding: 15rpx;
                    color: #fff;
                    text-align: center;
                    line-height: 30rpx;
                    font-size: 30rpx;
                    background-color: $color-main;
                }

                .unfollowed {
                    padding: 15rpx;
                    color: $color-main;
                    text-align: center;
                    line-height: 30rpx;
                    font-size: 30rpx;
                    background-color: #fff;
                    border: 1rpx solid $color-main;
                }
            }
        }

        .content {
            margin: 20rpx;
            font-size: 30rpx;
            word-wrap: break-word;
            white-space: pre-wrap;

            .text {
                white-space: pre-wrap;
            }

            .img-container {
                margin: 20rpx 0;

                .img {
                    width: 30%;
                    height: 160rpx;
                    margin-left: 20rpx;
                }
            }
        }
    }

    .comment-container {
        margin: 20rpx;
        padding-bottom: 100rpx;
        border-top: 1rpx solid #ddd;

        .title {
            font-size: 30rpx;
            margin: 20rpx 0;
        }

        .comment-input-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            background-color: #fff;
            border-top: 1rpx solid #ddd;
            padding: 20rpx;
            padding-bottom: Max(24rpx, env(safe-area-inset-top));
            /* 兼容 iPhone X 及以上设备 */
            position: fixed;
            width: 100%;
            bottom: 0;
            right: 0;

            .comment-input {
                flex: 3;
                display: flex;
                align-items: center;
                background-color: #ddd;
                font-size: 28rpx;
                border-radius: 42rpx;
                padding: 10rpx;

                .input {
                    width: 100%;
                    padding: 0 10rpx;
                }

            }

            .icon {
                flex: 1;

                .iconfont {
                    font-size: 50rpx;
                    margin-left: 30rpx;
                }

            }
        }
    }
}
</style>
